<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
</head>
<body>
<!-- 头部 -->
<div id="head">
    <div id="head1">
        <p>SDS抑郁测试</p>
        <p>你的抑郁测试</p>
    </div>
</div>
<div id="nav">最近30天测试：410313人</div>

<!-- 选项 -->
<div id="options">
    <!-- 进度条 开始 -->
    <div>
        <span id="curr">01</span>/
        <span id="totalnum">${allsds.total}</span>
    </div>
    <!-- 进度条 结束-->
    <div>
        <div></div>
    </div>
    <!-- 存放题目的 -->

    <div >
        <!-- 题目开始 -->
        <c:forEach items="${allsds.list}" var="s" varStatus="d">
               <span class="tm">
                <p>
                    <a>${s.tid}</a>、${s.question}
                </p>

                   <!-- 选项开始 -->
                <div>
                    <!-- <input type="hidden" value="1" name="subid"/> -->
                    <span style="display: none;" name="tid">${s.tid}</span>
                    <ul class="xx">

                        <li>${s.optionone}</li>
                        <li>${s.optiontwo}</li>
                        <li>${s.optionthree}</li>
                        <li>${s.optionfour}</li>

                    </ul>
                    <c:if test="${d.first}">
                        <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
                    </c:if>
                    <c:if test="${d.last}">
                        <input type="button" class="previousbutton" value="上一题" onclick="prevSub()"/>
                        <input type="button" class="nextbutton" value="提交" onclick="tijiao()"/>
                    </c:if>
                    <c:if test="${!d.first and !d.last}">
                        <div style="width: 500px">
                        <input type="button"  class="previousbutton" value="上一题" onclick="prevSub()"/>

<%--                            <a href="#" class="previousbutton" onclick="prevSub()">上一题</a>--%>
                            <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
<%--                            <a href="#" class="nextbutton"  onclick="nextSub()">下一题</a>--%>
                        </div>
                    </c:if>
<%--                    <c:if test="${!allsub.isLastPage and !allsub.isFirstPage}">--%>
<%--                        <input type="button" value="上一题" onclick="prevSub()"/>--%>
<%--                        <input type="button" value="下一题" onclick="nextSub()"/>--%>
<%--                    </c:if>--%>


                </div>
                   <!-- 选项结束 -->
                </span>

            <!-- 题目结束 -->
        </c:forEach>
    </div>


</div>
<div id="bottom">
    <%--        <div>--%>
    <%--            <p>【完成测试，您将获得】</p>--%>
    <%--            <div>--%>
    <%--                <ul>--%>
    <%--                    <li>测试介绍</li>--%>
    <%--                    <li>四种性格简介</li>--%>
    <%--                    <li>你的性格色彩测试结果</li>--%>
    <%--                    <li>性格特点</li>--%>
    <%--                    <li>行为特点</li>--%>
    <%--                    <li>如何与之相处</li>--%>
    <%--                </ul>--%>
    <%--            </div>--%>
    <%--            <p>--%>
    <%--                南京未莱迪电子商务有限公司龙湾分公司--%>
    <%--            </p>--%>
    <%--        </div>--%>
</div>

<script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
<script>


    var i =0;// 试题的索引 默认设置为0
    var j=1;// 进度条上的第几题
    var chackOption=[]; // 选中的数据
    // 获取试题的总数
    var totalsub=Number($("#totalnum").text());
    var recordid=localStorage.getItem("recordid");

    //
    function changeStyle(){
        localStorage.setItem("checkdata",JSON.stringify(chackOption));
        $(".tm").css("display","none");
        $(".tm")[i].style.display="block";
        changeBgColor();
    }

    $(function(){
        //localStorage.clear();// 清空localStorage里面的值
        changeStyle();// 只显示索引i对应的试题
        // 当点击选项的时候自动给切换到下一个题目
        $(".xx").children("li").click(function(){
            // 如果是最后一道题就不能点击了

            // 进度条的值加1

            //alert(j);
            if(j<totalsub){
                j++;
                changeJinduTiao("+");// 更改进度条  进度条+
            }



            // 将对那个的数据存到集合里面
            var checkobj={};
            // 获取当前的兄弟标签input
            var tid=$(this).parent(".xx").prev().text();// 获取试题的编号
            var answer=$(this).text().substr(0, 1);// 获取对应的答案
            checkobj["sdsno"]=tid;
            checkobj["sdsanswer"]=answer;
            checkobj["recordid"]=recordid;
            //alert(subid+"---"+answer+"===="+JSON.stringify(checkobj));
            chackOption[i]=checkobj; // 将对应的试题和自己选择的答案放到chackOption中
            $(".xx").children("li").css("background-color","");

            $(this).css("background-color","orange");
            //  相当于是后台里面的application    sessionlocalStorage
            // setItem("","")
            localStorage.setItem("checkdata",JSON.stringify(chackOption));// 将chackOption中的值存放道localStorage中
            if(i==(totalsub-1)){
                alert("已经是最后一道题了");
                return ;

            }
            i++;// 索引值加一


            changeStyle();// 更改显示的试题
        })
    })

    /**
     * 更改进度条
     */
    function changeJinduTiao(fh){

        if(j<10){
            $("#curr").html("0"+j);
        }else{
            $("#curr").html(j);
        }
        var oldwidth=$("#options div:nth-of-type(2) div").css("width").slice(0,-2);
        var newwidth=0;
        if(fh=='+'){
            newwidth=Number(oldwidth)+30.6
        }else{
            newwidth=Number(oldwidth)-30.6
        }

        $("#options div:nth-of-type(2) div").css("width",newwidth+"px");
    }

    /*
    *上一题的按钮
     */
    function prevSub(){

        i--;
        j--;
        changeJinduTiao("-");
        changeStyle();
        //changeBgColor();

    }
    /**
     * 下一题的按钮
     */

    function nextSub(){
        i++;
        j++;
        changeJinduTiao("+");
        changeStyle();
        // 更改背景颜色
        //changeBgColor();
    }

    /**
     * 更改背景颜色
     */
    function changeBgColor(){
        // 如果之前已经做过这个题目了就展示之前的结果  否则直接就展示下一题
        //集合中的数据拿出来并选中  之前已经选中的那个li
        var allData=JSON.parse(localStorage.getItem("checkdata"));
        var checkData=allData[i];

        if(checkData!='undefined'&&checkData!=null&&checkData!=''){
            var answer=checkData.sdsanswer;
            var tid=checkData.tid;
            // 找到答案为answer的选中
            //alert(answer);
            // 找到span的text为subid的然后显示
            var aaa=$($(".tm")[i]).children().find(".xx").children();
            aaa.each(item=>{
                $(aaa[item]).css("background-color","");
                // item是一个数字
                var content=aaa[item].innerText;

                var answer1=content.substr(0, 1);

                if(answer==answer1){
                    $(aaa[item]).css("background-color","orange");
                }
            })
        }
    }

    /**
     * 提交试题的记录
     */
    function tijiao(){
        // 将数据插入到数据库中
        var data= localStorage.getItem("checkdata");
        alert(data)
        // 判断是不是有空的  如果有空的就提示 需要做完题目
        var newData=JSON.parse(data);

        var notcheck=[];
        if(totalsub!=newData.length){

            alert("题没有做完！！！");
            return;
        }else{
            // 如果长度一样  里面有null 也提示题目没有做完
            newData.forEach(function (item,index){
                if(item==null){
                    notcheck.push((index+1)+"");
                    // alert("第"+(index+1)+"题没有做完！！！");
                    // return;
                }
            })
            if(notcheck.length!=0){
                alert("您"+notcheck.toString()+"道题没有做！！！！");
                return;
            }
        }
        //   如果传递到后台是一个json字符串
        //  contentType: 'application/json;charset=utf8',
        //
        $.ajax({
            url:"${pageContext.request.contextPath}/tSdsRecordDedtail",
            type:"post",
            data:data,
            contentType: 'application/json;charset=utf8',
            success:function (d){
                if(d.data==true){
                    localStorage.clear();// 清除localstorage中的值
                    window.location="${pageContext.request.contextPath}/sds/login.jsp"
                }
            }

        });


        //alert("提交到数据库！！！")
    }

</script>
</body>
</html>